<template>
	<view>
		<view class="block_1">
			<view class="title">联系信息</view>
			<view class="items">
				<view class="i_tit">
					联系人
				</view>
				<view class="">
					<input v-model="params.contactName" placeholder-class="inputs" type="text" placeholder="请输入联系人姓名" />
				</view>
			</view>
			<view class="items">
				<view class="i_tit">
					联系电话
				</view>
				<view class="input_flex">
					<input v-model="params.contactPhone" maxlength="11" placeholder-class="inputs" type="number"
						placeholder="请输入联系电话" />
					<view class="btn" @click="getPhonecode">
						{{codeBtn.codeText}}
					</view>
				</view>
			</view>

			<view class="items">
				<view class="i_tit">
					验证码
				</view>
				<view class="">
					<input v-model="params.code" placeholder-class="inputs" type="number" placeholder="请输入验证码" />
				</view>
			</view>
			<view class="items">
				<view class="i_tit">
					所在地区
				</view>
				<view class="">
					<region @regionStr='logat'></region>
				</view>
			</view>
		</view>
		<view class="block_2">
			<view class="title">备注信息</view>
			<view class="textarea">
				<textarea v-model="params.remark" placeholder-class="inputs" placeholder="请输入备注信息"></textarea>
			</view>
		</view>

		<view class="xy" @click="handlexy">
			<image v-if="isyes" src="../../static/yuana.png" mode=""></image>
			<image v-else src="../../static/yuan.png" mode=""></image>
			<view class="">
				我已阅读并同意<span @click.stop="$pageGo('/mypage/contactus/useragreement?id=5')">区域代理协议</span>
			</view>
		</view>


		<view class="footerbtn">
			<view class="cont">
				<view class="btn" @click="pagefromyes">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userApply
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				isyes: false,
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				},


				citylist: [],
				params: {
					contactName: "", //联系人
					contactPhone: "", //手机
					province: "", //省
					city: "", //市
					county: "", //区县
					remark: "", //备注
					code: "", //验证码
				}
			};
		},
		methods: {
			handlexy() {
				this.isyes = !this.isyes
				console.log('---');
			},
			//提交
			pagefromyes() {

				if (this.params.contactName == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人'
					})
					return
				}
				if (this.params.contactPhone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入联系电话'
					})
					return
				}
				if (this.params.code == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return
				}
				if (this.params.province == '' || this.params.city == '' || this.params.county == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择省市区'
					})
					return
				}
				if (!this.isyes) {
					uni.showToast({
						icon: 'none',
						title: '阅读并同意协议'
					})
					return
				}
				userApply(this.params).then(res => {
					if(res.code == 200){
						uni.showToast({
							icon: 'none',
							title: '已提交申请'
						})
						setTimeout(()=>{
							uni.redirectTo({
								url: '/mypage/proxy/fromyes'
							})
						},500)
					}
					
				})
				
			},
			logat(e) {
				let list = e.split('/')
				this.params.province = list[0]
				this.params.city = list[1]
				this.params.county = list[2]
			},
			getPhonecode() {
				if (this.codeBtn.codeStatus) {
					this.codeBtn.codeStatus = false
					let timerId = setInterval(() => {
						let codetime = this.codeBtn.codeTime
						codetime--
						this.codeBtn.codeTime = codetime
						this.codeBtn.codeText = codetime + "s"
						if (codetime < 1) {
							clearInterval(timerId)
							this.codeBtn.codeText = "重新获取"
							this.codeBtn.codeTime = 60
							this.codeBtn.codeStatus = true
						}
					}, 1000)
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.block_1 {
		background: #fff;
		padding: 20rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			margin-bottom: 40rpx;
		}

		.items {
			border-bottom: 1px solid #eee;
			margin-bottom: 40rpx;

			.i_tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;
			}

			.input_flex {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn {
					height: 60rpx;
					background: #000000;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 60rpx;
					padding: 0rpx 15rpx;
				}

				input {
					flex: 1;
				}
			}

			input {
				margin: 26rpx auto;
				font-weight: 500;
				font-size: 28rpx;
			}

		}

		.items:last-child {
			border-bottom: none;
		}

	}

	.inputs {
		color: #D1CDCD;
	}

	.block_2 {
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx 30rpx 20rpx 30rpx;
		box-sizing: border-box;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			margin-bottom: 40rpx;
		}

		textarea {
			width: 690rpx;
			height: 180rpx;
			background: #FBFBFB;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding: 20rpx;
			box-sizing: border-box;
			font-weight: 400;
			font-size: 28rpx;
		}
	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;

			.btn {
				width: 670rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}

			.absbtn {
				background: #808080;
			}
		}
	}

	.xy {
		display: flex;
		align-items: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #D1D1D6;
		text-align: center;
		width: 400rpx;
		margin: 20rpx auto;

		span {
			color: #000;
			margin: 0 6rpx;
		}

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
</style>